<template>
  <div class="opencoll" v-if="isRedoal">
    <!-- <div style="width: 100%; background-color: black">
      <div
        style="
          height: 48px;
          display: flex;
          justify-content: space-between;
          color: #fff;
          align-items: center;
          width: 95%;
          margin: 0 auto;
        "
      >
        <router-link
          to="/index"
          tag="div"
          style="width: 0.8rem; margin-left: 10px; transform: rotate(180deg)"
          ><img src="../assets/img20.png" width="100%"
        /></router-link>
        <div>微信积分系统</div>
        <div style="width: 0.5rem; margin-left: 10px"></div>
      </div>
    </div> -->
    <!-- <div class="header_but">
      <div>
        <el-button
          type="warning"
          icon="el-icon-arrow-left"
          circle
          @click="LeftButon"
        ></el-button>
      </div>
      <div class="lun_name">
        <p>{{ numName }}</p>
      </div>
      <div>
        <el-button
          type="warning"
          icon="el-icon-arrow-right"
          circle
          @click="RightButon"
        ></el-button>
      </div>
    </div> -->
    <div class="backjing">
      <div class="backfirtimg"><img src="../assets/lunky.png" alt="" /></div>
      <LuckyWheel
        ref="LuckyWheel"
        width="300px"
        height="300px"
        :defaultConfig="defaultConfig"
        :prizes="prizes"
        :default-style="defaultStyle"
        :blocks="blocks"
        :buttons="buttons"
        @start="startCallBack"
        @end="endCallBack"
      />
      <div class="parentstyle">
        <div class="colpar"><img src="../assets/lane.png" alt="" /></div>
        <div class="pcolo">活动奖品</div>
        <div class="colpar"><img src="../assets/lane.png" alt="" /></div>
      </div>
      <div class="listparent">
        <div
          :class="index % 2 ? 'collisttwo' : 'collist'"
          v-for="(item, index) in prizeList"
          :key="index"
        >
          <div class="colfirst">
            <div class="imgfirst"><img :src="item.image" alt="" /></div>
            <div class="secoundtitle">
              <div class="secPPP">{{ item.prize }}</div>
              <div>{{ item.name }}</div>
            </div>
          </div>
          <div :class="index % 2 ? 'lasttitletwo' : 'lasttitle'">
            剩余{{ item.quantity || 0 }}
          </div>
        </div>
      </div>
      <!-- <div class="boxTitle">
        <div
          style="
            padding: 8px 0;
            color: #621f15;
            background-color: #9e392c;
            width: 90%;
            margin: 0 auto;
            display: flex;
            justify-content: center;
          "
        >
          活动奖品
        </div>
        <div
          style="
            display: flex;
            justify-content: space-between;
            width: 90%;
            margin: 0 auto;
            background-color: #fff;
            align-items: center;
            border-bottom: 1px solid #dddd;
          "
          v-for="(item, index) in nineList"
          :key="index"
        >
          <div style="padding: 10px; display: flex; align-items: center">
            <div style="width: 40px">
              <img :src="item.image" style="width: 100%" />
            </div>
            <div
              style="
                display: flex;
                flex-direction: column;
                font-size: 14px;
                width: 140px;
                margin-left: 10px;
              "
            >
              <div>{{ item.name }}</div>
              <div style="color: #b3b1b2">{{ item.prize }}</div>
            </div>
          </div>
          <div style="padding: 10px; font-size: 12px; color: #b3b1b2">
            <div>剩余：{{ item.quantity }}</div>
          </div>
        </div>
      </div> -->
    </div>
  </div>
</template>

<script>
import request from "@/utils/request";
import { getToken, setToken, removeToken, delToken } from "@/utils/auth";
import wx from "weixin-js-sdk";
import { MessageBox, Toast } from "mint-ui";
import { Debounce } from "@/utils/public";
import banShare from "@/utils/banShare";
import sharePage from "@/utils/sharePage";
import { server } from "@/utils/env";
export default {
  data() {
    return {
      prizes: [],
      defaultStyle: {
        fontColor: "#F99717",
        fontSize: "14px",
      },
      blocks: [
        {
          padding: "13px",
          background: "#ffc27a",
        },
      ],
      buttons: [
        {
          radius: "50px",
          background: "#E76924",
        },
        {
          radius: "45px",
          background: "#963B29",
        },
        {
          radius: "41px",
          background: "#F9AD4B",
          pointer: true,
        },
        {
          imgs: null,
          radius: "35px",
          background: "#FAE383",
          fonts: [{ text: "99积分/次", top: "-5px" }],
        },
      ],
      chuanLL: "",
      userstring: "",
      numString: "",
      numName: "",
      nineList: [],
      messageTall: "",
      prizesID: "",
      LuckyWheelList: [],
      publicButton: 0,
      nowPoints: 0,
      userinfoState: null,
      videoId: 0,
      isFirst: window.sessionStorage.getItem("first"),
      onesPoints: 0,
      prizeList: [],
      defaultConfig: {
        gutter: "5px",
      },
      isRedoal: false,
      row: {},
    };
  },
  created() {
    let userId = window.localStorage.getItem("userId");
    console.log(this.$route.query.shareUserId);
    if (this.$route.params.time) {
      window.location.reload();
    } else {
      this.isRedoal = true;
    }
    this.form = this.$route.query.form;
    if (this.$route.query.row == undefined) {
      console.log("默认页面");
    } else {
      this.videoId = JSON.parse(this.$route.query.row);
    }
  },
  async mounted() {
    await this.getPrizesList();
    if (this.form == "ans") {
      const pathUrl = location.href.split("#")[0];
      request({
        url: "generator/user/front/sign",
        method: "post",
        data: {
          url: pathUrl,
        },
      }).then((res) => {
        banShare(res);
      });
      await this.hintTrue();
    } else {
      sharePage({ row: this.videoId });
      await this.hint();
    }
  },
  methods: {
    hint() {
      console.log("getinfo", "提示");
      return request({
        url: "/generator/user/front/getinfo",
        method: "get",
      }).then((response) => {
        this.nowPoints = response.user.nowPoints;
      });
    },
    hintTrue() {
      console.log("getinfo", "提示");
      return request({
        url: "/generator/usedamount/front/info?drawId=" + this.videoId,
        method: "get",
      }).then((response) => {
        this.nowPoints = response.usedamount.amount || 0;
      });
    },
    registerDay() {
      return request({
        url: "/generator/user/front/register",
        method: "get",
      }).then((response) => {
        console.log(response.status);
        if (response.status == 0) {
          Toast({
            message: response.message,
            iconClass: "glyphicon glyphicon-ok",
          });
        }
      });
    },
    getPrizesList() {
      let query = { id: this.videoId, type: 0 };
      return request({
        url: "/generator/draw/front/listDrawPrizes",
        method: "get",
        params: query,
      }).then((response) => {
        if (response.msg == "该抽奖活动已过期!") {
          Toast(response.msg);
          this.$router.go(-1);
          return;
        }
        console.log(response.draw);
        this.LuckyWheelList = response.draw;
        //中间按钮数字
        this.buttons[3].fonts[0].text = `${response.draw.points}积分/次`;
        this.onesPoints = response.draw.points;
        //第几抽奖
        this.numString = response.draw.id;
        //第几名字
        this.numName = response.draw.name;
        //第几的奖品列表
        this.nineList = [];
        console.log(response.draw.prizes);
        this.nineList = response.draw.prizes;
        this.prizeList = [];
        response.draw.prizes.forEach((item) => {
          if (item.quantity * 1 > 999) {
            item.quantity = "999+";
          }
          if (item.prize != "谢谢参与") {
            this.prizeList.push(item);
          }
        });
        console.log(this.nineList);
        const prizes = [];
        // 哈哈哈
        let data = this.nineList;
        data.forEach((item, index) => {
          // console.log(item, index);
          prizes.push({
            id: item.id,
            title: `${item.prize}`,
            background: index % 2 ? "#E76924" : "#FACD1E",
            fonts: [
              {
                text: `${item.prize}`,
                top: "10%",
              },
            ],
            imgs: [
              {
                // src: require(`../assets/logo.png`),
                src: item.image,
                width: "50px",
                height: "50%",
                top: "35%",
              },
            ],
          });
        });
        this.prizes = prizes;
        console.log(this.prizes);
      });
    },
    startCallBack: Debounce(async function () {
      this.userinfoState = localStorage.getItem("state");
      const state = this.userinfoState;
      const nowPoints = this.nowPoints;
      const LotteryIntegral = this.buttons[3].fonts[0].text;
      console.log("积分跳转三要素", state, nowPoints, LotteryIntegral);
      //
      if (this.isFirst == 0 && nowPoints < this.onesPoints) {
        console.log("此用户没用关注");
        this.$router.replace({ name: "jumpGZH" });
      } else if (this.nowPoints < this.onesPoints) {
        Toast("积分不足！");
      } else {
        console.log("开始");
        await this.getGoodS();
        // setTimeout(() => {
        if (this.messageTall == "success") {
          console.log(this.prizesID);
          for (let i = 0; i < this.prizes.length; i++) {
            if (this.prizes[i].id === this.prizesID) {
              console.log(i, this.prizes[i]);
              this.$refs.LuckyWheel.play();
              setTimeout(() => {
                this.$refs.LuckyWheel.stop(i);
              }, 3000);
            }
          }
        } else {
          Toast(this.messageTall);
        }
        // }, 1000);
      }
    }, 2000),
    endCallBack(prize) {
      console.log(prize, "prize");
      this.chuanLL = prize.id;
      let row = JSON.stringify(this.row);
      console.log("恭喜你获得", prize);
      this.nowPoints -= this.onesPoints;
      if (prize.title == "谢谢参与") {
        Toast("哦吼,谢谢参与,下次一定中！");
      } else {
        //type=0显示   1、2不显示
        Toast(`恭喜你获得${prize.title}`);
      
        row=JSON.parse(row)
          console.log(row.type,'row')
        if (row.type == 0 || row.type == 1) {
          this.$router.push({ name: "inpackeg", query: { row: row } });
        } else if( row.type == 2) {
          // this.$message({
          //   message: "积分领取成功",
          //   type: "success",
          // });
        }
      }
    },
    getGoodS() {
      let query = { id: this.numString };
      return request({
        url: "/generator/draw/front/draw",
        method: "get",
        params: query,
      }).then((response) => {
        this.messageTall = response.msg;
        this.prizesID = response.prizes.id;
        if (response.userprizes) {
          this.row = {
            type: response.prizes.type,
            id: response.userprizes.id,
            title: response.userprizes.prize,
            image: response.userprizes.image,
            prizesType:response.prizes.type
          };
        }
        // this.dialogVisible = true;
      });
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    LeftButon() {
      --this.publicButton;
      const Length = this.LuckyWheelList.length - 1;
      console.log("点击减一", this.publicButton);
      if (this.publicButton < 0) {
        this.publicButton = Length;
        console.log(this.LuckyWheelList[Length]);
        this.showLIST();
      } else if (this.publicButton >= 0) {
        console.log(this.LuckyWheelList[this.publicButton]);
        this.showLIST();
      }
    },
    RightButon() {
      ++this.publicButton;
      const Length = this.LuckyWheelList.length - 1;
      console.log("第一步点击", this.publicButton, Length);
      if (this.publicButton <= Length) {
        console.log("++", this.publicButton);
        console.log(this.LuckyWheelList[this.publicButton]);
        this.showLIST();
      } else if (this.publicButton > Length) {
        this.publicButton = 0;
        this.showLIST();

        console.log(this.LuckyWheelList[this.publicButton]);
      }
    },
    showLIST() {
      const list = this.LuckyWheelList;
      const num = this.publicButton;
      // console.log(response.rows[0].points);
      // console.log(this.buttons[3].fonts[0].text);
      // //中间按钮数字
      this.buttons[3].fonts[0].text = `${list[num].points}积分/次`;
      // //第几抽奖
      this.numString = list[num].id;
      // //第几名字
      this.numName = list[num].name;
      // //第几的奖品列表
      this.nineList = list[num].prizes;
      const prizes = [];
      // // let data = [
      // //   "1元红包",
      // //   "100元红包",
      // //   "0.5元红包",
      // //   "2元红包",
      // //   "10元红包",
      // //   "50元红包",
      // //   "0.3元红包",
      // //   "5元红包",
      // // ];
      let data = this.nineList;
      // // console.log(response.rows[0].prizes);
      data.forEach((item, index) => {
        console.log(item, index);
        prizes.push({
          id: item.id,
          title: `${item.name}`,
          background: index % 2 ? "#f9e3bb" : "#f8d384",
          fonts: [
            {
              text: `${item.name}`,
              top: "10%",
            },
          ],
          imgs: [
            {
              // src: require(`../assets/logo.png`),
              src: item.image,
              width: "30%",
              top: "35%",
            },
          ],
        });
      });
      this.prizes = prizes;
      // console.log(this.prizes);
    },
  },
};
</script>
<style lang="less" scoped>
.backjing {
  // min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30px 0 0 0;
  background-image: url("../assets/background.png");

  background-size: 100% 100%;
  // background: #fd9e24;
}
.boxTitle {
  width: 100%;
  // height: 100%;
  padding: 20px;
  // background-color: #c44a30;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.header_but {
  // background-color: #c44a30;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.lun_name p {
  // border: 1px solid red;
  color: #ffff;
  font-weight: bold;
  font-size: 20px;
}
.listparent {
  // border: 1px solid red;
  width: 100%;
  padding: 0 20px 20px 20px;
}
.imgfirst {
  // border: 1px solid red;
  width: 60px;
  height: 60px;
  img {
    width: 100%;
    height: 100%;
  }
}
.secoundtitle {
  padding: 0 20px;
  color: white;
}
.secPPP {
  font-size: 20px;
  font-weight: bold;
}
.collist {
  display: flex;
  justify-content: space-between;
  align-items: center;
  // background: #ec681e;
  background-image: url("../assets/oringe.png");
  background-size: 100% 100%;
  padding: 10px;
}
.collisttwo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  // background: #f9b578;
  background-image: url("../assets/yellow.png");
  background-size: 100% 100%;
  padding: 10px;
}
.colfirst {
  display: flex;
  align-items: center;
}
.lasttitle {
  color: #ec681e;
  margin-right: 10px;
  // border: 1px solid red;
  border-radius: 50px;
  background: #f9b578;
  text-align: center;
  line-height: 30px;
  width: 100px;
  height: 30px;
}
.lasttitletwo {
  color: #f9b578;
  margin-right: 10px;
  border-radius: 50px;
  background: #ec681e;
  text-align: center;
  line-height: 30px;
  width: 100px;
  height: 30px;
}
.backfirtimg {
  // border: 1px solid red;
  width: 220px;
  margin-bottom: 50px;
}
.backfirtimg img {
  width: 100%;
}
.parentstyle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30px;
}
.colpar {
  // border: 1px solid red;
  img {
    width: 100%;
  }
}
.pcolo {
  color: #ec681e;
  font-size: 18px;
  font-weight: bold;
  width: 150px;
  text-align: center;
  padding: 0 5px;
}
</style>